<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8"> 	
	<meta name="viewport" content="width=310,height=668,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="./css/base.css">
	<style type="text/css">

	body{background:#1a1a1a;}
	.bmw{background:#1a1a1a;width:310px;height:668px;overflow:hidden;text-align:center;}
	.bmw img{float:left;}
	.bmw .guanzhu{clear:both;padding:14px 0;background-color:#303030;-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.5);}
	.bmw .guanzhu01{display:block;width:285px;margin:0 auto;height:40px;border:1px solid #489706;background:url('./img/01a.jpg') no-repeat 50% 50%;}
	.bmw .guanzhu02{display:block;width:278px;margin:13px auto;height:38px;background:url('./img/01b.jpg') no-repeat 50% 50%;}
	.tableCss{padding:10px 0 5px;}
	table{margin:0 auto;}
	table tr td{ font:200 12px/35px '微软雅黑';color:#646464;}
	table select,table input[type=text]{width:180px;vertical-align: middle;}
	table tr{text-align:left;}
	table tr h4{text-align:left;}
	table thead td{color:#fff;font-size:16px;}
	
	</style>
	<title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>
	<section class='bmw' >
		<img src='./img/310.jpg' alt='' />
		<div class='guanzhu' class=''>
			<a href="" class='guanzhu01'></a>
		</div>
		<form action="" id='formActionId'>
		<div class="tableCss">
			<table width="285" border="1">
				<thead>
				  <tr>
					<td width="83"><h4>有奖调查</h4></td>
					<td width="186">V40 Cross Country</td>
				  </tr>
				
				</thead>
				<tbody>
				  <tr>
					<td>您的姓名:</td>
					<td><input type='text' name='name' /></td>
				  </tr>
				  <tr>
					<td>您的年龄:</td>
					<td><select name='age'>
						<option  value='0'>年龄段</option>
						<option  value='18-20'>18-20</option>
						<option  value='21-25'>21-25</option>
						<option  value='26-30'>26-30</option>
						<option  value='31-35'>31-35</option>
						<option  value='36-40'>36-40</option>
						<option  value='41-45'>41-45</option>
						<option  value='46-50'>46-50</option>
						</select></td>
				  </tr>
				  <tr>
					<td>您的性别:</td>
					<td>男<input type="radio" name='sex' value='男'/> 女<input type="radio" name='sex'  value='女'/> </td>
				  </tr>
				  <tr>
					<td>感兴趣的车型:</td>
					<td>
					<select name='car_type'>
					<option  value='0'>感兴趣的车型:</option>
					<option  value='V40'>V40</option>
					<option value='V40CrossCountry'>V40CrossCountry</option>
					<option  value='S60'>S60</option>
					<option  value='S60L'>S60L</option>
					<option  value='V60'>V60</option>
					<option  value='XC60'>XC60</option>
					<option  value='S80L'>S80L</option>
					<option  value='XC90'>XC90</option>
					</select></td>
				  </tr>
				  <tr>
					<td>您最看好的地方:</td>
					<td><select name='interested'>
							<option  value='0'>最吸引您的地方是</option>
							<option  value='18寸大轮毂'>18寸大轮毂</option>
							<option  value='全景天窗'>全景天窗</option>
							<option  value='加高底盘'>加高底盘</option>
							<option  value='行李架'>行李架</option>
							<option  value='5门5座'>5门5座</option>
						</select></td>
				  </tr>
				  <tr>
					<td>考虑购买吗:</td>
					<td>是<input type="radio" name='wttby'   value='是' /> 否<input type="radio" name='wttby'  value='否'/> </td>
				  </tr>
			  </tbody>
			</table>
		</div>
		<a href="javascript:void(0)" id='submitPost' class='guanzhu02'></a>
		</form>
	</section>	
	<script type="text/javascript" src='js/zepto.js'></script>
	<script type="text/javascript">

			var formAction = document.querySelector('#formActionId');
	$('#submitPost').click(function(){
		// 收集数据
		var data={};

			//$('')
			var formAction = document.querySelector('#formActionId');

			var name = formAction.querySelector('input[name=name]');
			if(name.value == ''){
				alert('请添加输入名字'); return false;
				
				}else{
				data['name'] = name.value;
				}

			var age = formAction.querySelector('select[name=age]'),
				selectedIndex =  age.selectedIndex,
				agevalue = age.querySelector('option:nth-child('+(selectedIndex+1)+')').value
			if(agevalue == '0'){alert('请选择年龄'); return false;}else{
				data['age'] = agevalue;
				}

			var sex = formAction.querySelector('input[name=sex]:checked')
			if(!sex || sex.value == ''){alert('请选择性别'); return false;}else{
				data['sex'] = sex.value;
				}


			var car_type = formAction.querySelector('select[name=car_type]'),
				carselectedIndex =  car_type.selectedIndex,
				car_typevalue = car_type.querySelector('option:nth-child('+(carselectedIndex+1)+')').value;
			if(car_typevalue == '0'){alert('请选择感兴趣的车型'); return false;}else{
				data['car_type'] = car_typevalue;
				}




			var interested = formAction.querySelector('select[name=interested]'),
				interestedselectedIndex =  interested.selectedIndex,
				interestedvalue = interested.querySelector('option:nth-child('+(interestedselectedIndex+1)+')').value;
			if(interestedvalue == '0'){alert('最吸引您的地方是'); return false;}else{
				data['interested'] = interestedvalue;
				}


			var wttby = formAction.querySelector('input[name=wttby]:checked')
			if(!wttby || wttby.value == ''){alert('是否想要购买？'); return false;}else{
				data['wttby'] = wttby.value;
				}

		// 提交数据

		$.post('http://events.youku.com/2014/volvo_data/api/infos.php',data,function(req){
			console.log('提交结果',data);
			console.log('返回结果',req);
			if(req == '-2'){
				alert('由于种种不测的原因失败了，我们正在努力查找原因');
			}else if(req =='-1'){
				alert('数据提交为空请重新提交');
			}else if(req =='1'){
				alert('谢谢您的参与，提交成功');
			}
		});
	
	});
	</script>
</body></html>


